<template>
  <div role="dialog" v-show="visible" class="dialog">
    <div role="document" :class="classes" class="dialogDefault">
      <div :style="styles" class="dialog-content">
        <slot name="modal-header">
          <div class="modal-header"></div>
        </slot>
        <slot name="modal-body">
          <div class="modal-body"></div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Vdialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    closeDialog: {
      type: Function,
      default () {}
    },
    classes: {
      type: String,
      default: 'dialogContent'
    },
    styles: {
      type: String,
      default: 'width:100%'
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped>
.dialog{
  position: fixed; /* 根据浏览器定位 */
  z-index: 100; /* 放在顶部 */
  left: 0;
  top: 0;
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0,0,0,0.4); /* 背景色 */
}
.dialogDefault{
  display: flex; /*采用flexbox布局*/
  flex-direction: column; /*垂直排列*/
  position: relative;
  background-color: #ffffff;
  border: 0px solid #888;
  top:50%;
  margin: 0 auto;
  transform: translateY(-50%);
}
.dialogContent{
    width: 600px;
  }
.dialogSmallContent{
  width: 500px;
}
</style>
